<template>
  <div style="padding: 0 2px">
    <a-date-picker :size="size" style="width: 116px" valueFormat="YYYY-MM-DD" @change="change"
                   :placeholder="innerPlaceholder" v-model="startText"/>
    -
    <a-date-picker :size="size" style="width: 116px" valueFormat="YYYY-MM-DD" @change="endBlur"
                   :placeholder="innerPlaceholder" v-model="endText"/>
  </div>
</template>
<script>
import { createModelForVue, createProps } from '@/utils'


export default {
  name: 'MoneySearch',
  model: createModelForVue(),
  props: {
    auth: createProps(String, 'edit'),
    placeholder: createProps(String),
    fieldConfig: createProps(Object),
    size: createProps(String),
    value: createProps(Array)
  },
  data() {
    return {
      startText: null,
      endText: null
    }
  },
  methods: {
    startBlur(date) {
      this.change()
    },
    endBlur(date) {
      this.change()
    },

    change() {
      this.$emit('update:value', [this.startText, this.endText])
      this.$emit('update:title', [this.startText, this.endText])
    },
    resolveRange(v) {
      if (!v) return v
      if (parseFloat(v) > this.max) {
        v = this.max + ''
      }
      if (parseFloat(v) < this.min) {
        v = this.min + ''
      }
      return v
    }
  },
  computed: {
    innerPlaceholder() {
      return (this.fieldConfig && this.fieldConfig.placeholder) || this.placeholder
    },
  },
  watch: {
    // value: {
    //   handler() {
    //     if(!this.showZero) {
    //       try {
    //         if (this.value == 0 || parseFloat(this.value + '') === 0)
    //           return this.innerText = undefined;
    //       } catch (e) {
    //       }
    //     }
    //     this.innerText = formatMoney(this.value);
    //   },
    //   immediate: true
    // }
  }
}
</script>
<style>
.form-design-money-input {
  text-align: right;
}
</style>